<template>
  <el-card shadow="never" style="margin-bottom: 16px;">
    <div class="title">
      <div class="img">
        <img src="/static/ecommerce/user_behavior_default.png" alt="" />
      </div>
      <div class="text">
        <div class="text-title">{{textTitle}}</div>
        <div class="text-detail">{{textDetail}}</div>
        <div class="btns">

          <!-- 外链暂时隐藏 -->
          <!-- <el-button size="small" @click="introduce">功能介绍</el-button> -->
          
        </div>
      </div>
    </div>
  </el-card>
  <el-card shadow="never">
    <div class="default-content">
      <div class="default-img">
        <img src="/static/basic/Group.png" alt="" />
      </div>
      <div class="default-text">
        <span>
          暂时无法使用，请确保 <span class="btn-span" @click="toKeyida">客易达电商</span> 应用配置及
        </span>
        <span>
          <span class="btn-span" @click="toSetting">开发者信息</span> 配置均已开启，才可以使用。
        </span>
      </div>
    </div>
  </el-card>

</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed, nextTick } from 'vue'
import router from '@/router'

const textTitle = ref<string>('用户行为数据')
const textDetail = ref<string>('商家可通过标准API、客易达电商收集用户行为数据，基于用户行为数据完善用户画像，实现精准营销。')

const props = withDefaults(defineProps<{introduceUrl?: string}>(),{
  introduceUrl: ''
})

const introduce = ()=>{
  console.log('功能介绍')
  !!props.introduceUrl && window.open(props.introduceUrl, '_blank')
  // window.open('https://www.baidu.com', '_blank')
}

const toKeyida = ()=>{
  console.log('客易达电商')
  const path = '/appmarket/appmarket'
  router.push(path)
}

const toSetting = ()=>{
  console.log('开发者信息')
  const path = '/channelconfig/developConfiguration/basicConfiguration'
  router.push(path)
}

</script>

<style scoped lang="scss">
  $length: 80px;
  .title{
    width: 100%;
    display: flex;
    align-items: center;

    .img{
      width: $length;
      height: $length;
      border-radius: 8px;
      overflow: hidden;
      margin-right: 8px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .text{
      line-height: 1.8;
      .text-detail{
        font-size: 12px;
      }
      .btns{

      }
    }
  }

  .default-content{
    height: calc(100vh - 330px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .default-img{

    }
    .default-text{
      margin: 6px 0 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      span{
        line-height: 2;
        font-size: 13px;
        font-weight: 300;
      }
      .btn-span{
        color: #FF6B00;
        cursor: pointer;
      }

    }
  }
</style>
